<p>this is source config</p>
<!-- <div class="content">
  <router-outlet></router-outlet>
</div> -->
<flink-jdbc></flink-jdbc>

<flink-kafka></flink-kafka>

<flink-socket></flink-socket>


<flink-hdfs></flink-hdfs>

<flink-redis></flink-redis>
<flink-rtsp></flink-rtsp>
<flink-rtmp></flink-rtmp>
<flink-modbus></flink-modbus>
<flink-opcua></flink-opcua> 
<!-- <button nz-button nzType="primary" nzShape="circle" (click)="hello()">按一下试试</button>

 -->



<!-- 以下为弃用switch 决定数据源的表格-->
<div nz-row>
  <div nz-col nzSpan="12" class="col-nzs">
    <button nz-button nz-dropdown [nzDropdownMenu]="menu4">
      {{sourcdatatype.tostring()}}
      <i nz-icon nzType="down"></i>
    </button>
    <nz-dropdown-menu #menu4="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item  (click)="setsourcType(sourcetype.JDBC)">JDBC</li>
        <li nz-menu-item (click)="setsourcType(sourcetype.REDIS)">REDIS</li>
        <li nz-menu-item (click)="setsourcType(sourcetype.HDFS)">HDFS</li>
        <li nz-menu-item (click)="setsourcType(sourcetype.KAFKA)">KAFKA</li>
      </ul>
    </nz-dropdown-menu>

    <div [ngSwitch]="sourcdatatype.type">
      <div *ngSwitchCase="sourcetype.JDBC">
        <flink-jdbc></flink-jdbc>
      </div>
      <div *ngSwitchCase="sourcetype.REDIS">
        <flink-redis></flink-redis>
      </div>
      <div *ngSwitchCase="sourcetype.HDFS">
        <flink-hdfs></flink-hdfs>
      </div>
      <div *ngSwitchCase="sourcetype.KAFKA">
        <flink-kafka></flink-kafka>
      </div>
    </div>
    </div>




  <div nz-col nzSpan="12" class="col-nzs">

    <button nz-button nz-dropdown [nzDropdownMenu]="menu5">
      {{destdatatype.tostring()}}
      <i nz-icon nzType="down"></i>
    </button>
    <nz-dropdown-menu #menu5="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item  (click)="setdstType(sourcetype.JDBC)">JDBC</li>
        <li nz-menu-item (click)="setdstType(sourcetype.REDIS)">REDIS</li>
        <li nz-menu-item (click)="setdstType(sourcetype.HDFS)">HDFS</li>
        <li nz-menu-item (click)="setdstType(sourcetype.KAFKA)">KAFKA</li>
      </ul>
    </nz-dropdown-menu>
    

    <div [ngSwitch]="destdatatype.type">
      <div *ngSwitchCase="sourcetype.JDBC">
        <flink-jdbc></flink-jdbc>
      </div>
      <div *ngSwitchCase="sourcetype.REDIS">
        <flink-redis></flink-redis>
      </div>
      <div *ngSwitchCase="sourcetype.HDFS">
        <flink-hdfs></flink-hdfs>
      </div>
      <div *ngSwitchCase="sourcetype.KAFKA">
        <flink-kafka></flink-kafka>
      </div>
    </div> 

  </div>

</div>
